<template>
  <div class="bdcontainer">
    <van-nav-bar
      class="page-nav-bar"
      title="品牌详情"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!----------品牌详情组件---------------->
    <brand-item :item="brandInfo"></brand-item>
    <!----------品牌相关商品---------------->
    <!-- 空内容 -->
    <van-empty v-if="list.length===0 && !error && !loading" description="该品牌下无商品信息" />
    <!-- 列表 -->
    <van-list v-model="loading" :error.sync="error" :finished="finished"  :finished-text="list.length ? '没有更多了':''"  @load="initData">
      <!-- 商品列表组件 -->
       <good-list :list="list" ></good-list>   
    </van-list>
    <!-- 固定底部 -->
    <van-button class="fix-box" block @click="attentionClick" >
      <van-icon name="like" v-if="isAttention" size="20" color="#1989fa " />
      <van-icon name="like-o" v-else size="20" />
      {{ isAttention ? '已关注品牌':'关注品牌' }}
    </van-button>
  </div>
</template>

<script>
import { getBrandInfo,getBrandProductList,addAttention,deleteAttention,getAttentionInfo } from "@/api/brand";
import BrandItem from '@/components/brand-item'
import GoodList from '@/components/good-list';
import { mapGetters } from 'vuex'
export default {
  name:'BrandDetail',
  components:{ BrandItem,GoodList },
  data() {
    return {
      list: [],  // 品牌相关商品列表
      brandInfo: {},  // 品牌详情
      query:{
        brandId:this.$route.query.id,
        pageNum:1,
        pageSize:10
      },
      loading:false,
      finished:false,
      error:false,
      total:0,
      isAttention:false // 关注品牌 
    };
  },
  computed: {
    ...mapGetters(['memberId','username'])
  },
  created() {
    this.getDetailInfo()
    if(this.memberId) this.getAttentionInfo()
  },
  methods: {
    // 获取列表
    async initData(){
      try {
        let {list,total} = await getBrandProductList(this.query)
        this.list.push(...list)
        this.total = total
        if(this.list.length === this.total){
          this.finished = true
        }else{
          this.query.pageNum++
        }
      } catch (error) {
        this.error = true
      }
      this.loading = false
    },
    // 获取品牌详情
    async getDetailInfo(){
      this.brandInfo = await getBrandInfo(this.$route.query.id)
    },
    // 获取品牌的关注详情
    async getAttentionInfo(){
      let res = await getAttentionInfo({
        brandId:this.$route.query.id
      })
      if(res) this.isAttention = true
    },
    // 关注、取消关注
    async attentionClick(){
      if(!this.memberId) return this.$toast.fail('登录才可操作')
      if(this.isAttention){
        // 取消
        await deleteAttention({
          'brandId':this.$route.query.id
        })
      }else{
        // 关注
        await addAttention({
          'brandId':this.$route.query.id,
          "brandLogo": this.brandInfo.bigPic || this.brandInfo.logo,
          "brandName": this.brandInfo.name,
          "memberId": this.memberId,
          "memberNickname": this.username
        })
      }
      this.$toast.success(this.isAttention ? '取消成功':'关注成功')
      this.isAttention = !this.isAttention
    }
  },
};
</script>
<style lang="less" scoped>
.bdcontainer{
  padding-top: 92px;
  padding-bottom: 80px;
}
.fix-box{
  position: fixed;
  bottom: 0;
  z-index: 1000;
}
</style>
